.red{
	color: red;
}
.din{
    font-family:din !important;
}


.statement1{
    height:130rpx;
    padding-top:20rpx;
    .btn{
        width:200rpx;
        height:80rpx;
        border-radius: 10rpx;
        .text{
            color:#1dc691;
            font-size:28rpx;
        }
    }
}

.popup-row {
    padding-bottom: 16rpx;
    .picker-view {
        height: 400rpx;
        margin-top: 20rpx;
    }
    .item {
        display: flex;
        flex-direction: row;
        align-items: center;
        .text{
            font-size: 34rpx;
            font-weight: 500;
        }

    }
    .integer-row {
        justify-content: flex-end;
        padding-right: 24rpx;
    }
    .decimal-row {
        padding-left: 31rpx;
    }
}

.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}
.j-end {
    justify-content: flex-end;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}
.search_box {
        width: 750rpx;
        background: #fff;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
        .search {
            width: 690rpx;
            height: 60rpx;
            border-radius: 10rpx;
            background: #f5f5f5;
            padding: 0 30rpx;
            .inp {
                width: 570rpx;
                margin-left: 20rpx;
                font-size: 25rpx;
            }
        }
    }
.scroll_btn_box{
    width:750rpx;
    height:120rpx;
    .scroll_btn{
        width:690rpx;
        height:80rpx;
        background: #1DC691;
        border-radius: 10rpx;
        &.disabled{
            height:100rpx;
            background:#5DD4AF;
        }
        .text{
            font-size:26rpx;
            font-weight:500;
            color:#fff;
            margin-left:15rpx;
            margin-right:15rpx;
        }
        .arrow{
            position:relative;
            top:2rpx;
            width:24rpx;
            height:24rpx;
        }
    }

}
.section2{
    position: fixed;
    z-index:150;
    width: 750rpx;
    transition: transform 0.15s linear;
    .clock_card{
        position:relative;
        width:690rpx;
        height:150rpx;
        margin-left:30rpx;
        //background: linear-gradient(to right,#EDFFFA,#FFFFFF);
        &.finish{
            background: linear-gradient(to right,#C3FFEC,#FFFFFF);
        }
        &.not_finish{
            background: linear-gradient(to right,#EDFFFA,#FFFFFF);
        }
        &.not_join{
            background: #fff;
        }
        border-radius: 20rpx;
        padding:0 36rpx 0 20rpx;
        margin-bottom:20rpx;
        overflow: hidden;
        .big_check{
            position:absolute;
            top:-30rpx;
            right:-18rpx;
            width:214rpx;
            height:215rpx;
        }
        .head_box{
            width:100rpx;
            height:100rpx;
            border-radius:1000rpx;
            margin-right:30rpx;
            background:#fff;
            box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.1);
            .head{
                width:90rpx;
                height:90rpx;
                border-radius:1000rpx;
            }
        }

        .msg_box{
            width:330rpx;
            .title{
                .circle_dot{
                    width:28rpx;
                    height:28rpx;
                }
                .text{
                    width:300rpx;
                    font-size:30rpx;
                    font-weight: 600;
                    color: #1DC691;
                    margin-left:9rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    lines: 1;
                    
                }
            }
            .desp{
                margin-top:10rpx;
                .text{
                    font-size:26rpx;
                    color:#999;
                    &.active{
                        color:#999;
                    }
                    &.finish{
                        color:#333;
                    }
                }
            }
        }

        .right_btn{
            width: 150rpx;
            height: 60rpx;
            border-radius: 40rpx;
            border: 2rpx solid #1DC691;
            background-color:transparent;
            &.active{
                background-color: #1DC691;
            }
            &:active{
                opacity: .7;
            }
            .text{
                font-size: 30rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                color: #1DC691;
                line-height: 28rpx;
                &.active{
                    color:#fff;
                }
            }

        }
    }
}

.section {
    position: fixed;
    width: 750rpx;
    transition: transform 0.15s linear;
    .box {
        width: 710rpx;
        border-radius: 10rpx;
        background: #fff;
        margin-left: 20rpx;
        .title {
            height: 80rpx;
            padding: 0 32rpx;
            .text_content {
                .text {
                    color: #333;
					font-weight: 600;
                    font-size: 34rpx;
                }
                .shadow {
                    position: absolute;
                    top: 20rpx;
                    left: 0;
                    width: 172rpx;
                    height: 26rpx;
                    border-radius: 13rpx;
                    background: linear-gradient(
                        to left,
                        rgba(255, 255, 255, 0),
                        #23e2a6
                    );
                }
            }
            .right_content {
                width:100rpx;
                height:50rpx;
                justify-content: flex-end;
                .text {
                    color: #999;
                    font-size: 24rpx;
                }
                .icon {
                    width: 20rpx;
                    height: 20rpx;
                }
            }
        }

        .mid_box {
            height: 260rpx;
            .line {
                position: absolute;
                width: 650rpx;
                height: 1px;
                background: #f5f5f5;
                border-radius: 3px;
                bottom: 0;
                left: 30rpx;
            }
            .left_box {
                position: relative;
                width: 230rpx;
                height: 260rpx;
                padding-left: 10rpx;
                .text_content {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 230rpx;
					height: 260rpx;
                    top: 25rpx;
                }
                .text {
                    color: #999999;
                    font-size: 22rpx;
                    font-family: 'DIN';
                }
            }
            .chart_box {
                width: 250rpx;
                height: 260rpx;
                .text_content{
                    position:absolute;
                    width:250rpx;
                    height:260rpx;
                    left:0;
                    top:0;
                    .text1{
                        font-size:22rpx;
						height: 30rpx;
                    }
					.mid{
						height: 70rpx;
					}
                    .text2{
                        /*margin-top: -10rpx;*/
                        font-weight:bold;
                        font-size:50rpx;
                    }

                    .text3{
                        font-size:20rpx;
                        color:#333;
                        position:relative;
                        top:5rpx;
                    }
                    .text4{
						margin-top: -10rpx;
                        color:#FF8F2B;
                        font-size:23rpx;
                        font-weight:bold;
						height: 40rpx;
                    }
                }
            }
            .right_box {
                position: relative;
                width: 230rpx;
                height: 260rpx;
                .text_content {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 230rpx;
                    top: 25rpx;
                    .text {
                        color: #999999;
                        font-size: 22rpx;
                    }
                    .icon {
                        width: 36rpx;
                        height: 36rpx;
                        margin-left: 5rpx;
                    }
                }
                .jinxi {
                    position: absolute;
                    left: 0;
                    width: 230rpx;
                    bottom: 30rpx;
                    .text {
                        color: #666;
                        font-size: 20rpx;
                    }
                }
            }

            .bg_box {
                width: 190rpx;
                height: 106rpx;

                .bg1,
                .bg2 {
                    position: absolute;
                    width: 190rpx;
                    height: 106rpx;
                    top: 0;
                    left: 0;
                }
                .text1 {
                    font-size: 50rpx;
                    font-weight: 600;
                }

                .text {
                    position: relative;
                    color: #333;
                    font-size: 20rpx;
                }
            }
        }

        .bottom_box {
            .desp {
                padding: 0 30rpx;
                margin-top: 10rpx;
                .text {
                    font-size: 20rpx;
                    font-weight: 400;
                    color: #999999;
                }
            }
            .num_box {
                .textview1 {
                    margin-top: 10rpx;
                    .text {
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #666666;
                    }
                    .icon {
                        width: 24rpx;
                        height: 24rpx;
                    }
                }

                .textview2 {
                    .notext {
                        font-size: 40rpx;
                        font-weight: 600;
                    }
                    .text1 {
                        font-size: 50rpx;
                        font-weight: 600;
                    }
                    .text2 {
                        font-size: 20rpx;
                        position: relative;
                        top: 9rpx;
                    }
                }
            }

            .box1 {
                padding: 0 30rpx;
                height: 80rpx;
                .left_box {
                    width: 100rpx;
                }
                .slide_box {
					position: relative;
                    width: 470rpx;
                    height: 80rpx;
					
                    .slide {
                        flex: 1;
                        .bg {
                            position: absolute;
                            bottom: 6rpx;
                            width: 460rpx;
                            height: 20rpx;
                            left:5rpx;
                            background: #cdfaed;
                            border-radius: 10rpx;
                        }
                        .s1 {
                            position: absolute;
                            left:0rpx;
                            height: 24rpx;
                            background: #fff;
                            border-radius: 12rpx;
                            padding: 2rpx;
                            bottom: 0rpx;
                            .bg {
                                height: 20rpx;
                                background: linear-gradient(
                                    to right,
                                    #e0fdf6,
                                    #26e2a6
                                );
                                border-radius: 15px;
                                box-shadow: 0px 0px 1px 0px
                                    rgba(23, 140, 103, 0.3);
                            }
                        }

                        .gap{
								position: absolute;
								bottom:34rpx;
								height: 30rpx;
								font-size: 22rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 30rpx;
							}

                        .dot_box {
                            position: absolute;
                            bottom: 2rpx;

                            .dot {
                                width: 38rpx;
                                height: 30rpx;
                            }
                            .percent {
								text-align: center;
								width: 80rpx;
                                font-size: 20rpx;
                                color: #1dc691;
                            }
							
                        }
                    }
                }
                .right_box {
                    width: 100rpx;
                    height: 80rpx;
                }

                .row {
                    height: 40rpx;
                    .text {
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .icon {
                        width: 24rpx;
                        height: 24rpx;
                    }
                    .text1 {
                        font-size: 30rpx;
                        font-weight: 600;
                        color: #333;
                    }
                    .text2 {
                        position: relative;
                        top: 3rpx;
                        font-size: 20rpx;
                        font-weight: 600;
                        color: #333;
                    }
                }
            }
        }

        .msg {
            padding: 0 40rpx;
            .left_box {
                width: 120rpx;
                .text_content {
					
					position: relative;
                    width: 120rpx;
                    height: 70rpx;
                    .text1 {
						position: absolute;
						top:0;
						text-align: center;
						width: 100rpx;
                        color: #666;
                        font-size: 24rpx;
                    }
                    .text2 {
						padding-top: 35rpx;
                        color: #333;
                        font-weight: bold;
                        font-size: 24rpx;
                    }
                }

                .water {
                    position: relative;
                    width: 100rpx;
                    height: 468rpx;
                    margin-top: 10rpx;
                    border-radius: 8rpx;
                    background: #f1f1f1;
                    overflow: hidden;
                    .shadow {
                        width: 100rpx;
                        height: 4rpx;
                        background: #fff;
                        position: absolute;
                        &.shadow1 {
                            top: 55rpx;
                        }
                        &.shadow2 {
                            top: 114rpx;
                        }
                        &.shadow3 {
                            top: 173rpx;
                        }
                        &.shadow4 {
                            top: 232rpx;
                        }
                        &.shadow5 {
                            top: 291rpx;
                        }
                        &.shadow6 {
                            top: 350rpx;
                        }
                        &.shadow7 {
                            top: 409rpx;
                        }
                    }

                    .water1 {
                        position: absolute;
                        width: 100rpx;
                        background: #9eedd6;
                        transition: height .1s ease-in-out;
                        left: 0;
                        bottom: 0;
                        border-bottom-left-radius: 8rpx;
                        border-bottom-right-radius: 8rpx;
                        border-top-left-radius: 0;
                        border-top-right-radius: 0;
                        &.round{
                            border-top-left-radius: 8rpx;
                            border-top-right-radius: 8rpx;

                        }
                    }

                    .water2 {
                        position: absolute;
                        width: 100rpx;
                        background: #26e2a6;
                        transition: height .4s ease-in-out;
                        left: 0;
                        bottom: 0;
                        border-bottom-left-radius: 8rpx;
                        border-bottom-right-radius: 8rpx;
                        border-top-left-radius: 0;
                        border-top-right-radius: 0;
                        &.round{
                            border-top-left-radius: 8rpx;
                            border-top-right-radius: 8rpx;

                        }
                    }
                }
            }

            .right_box {
                width: 500rpx;
                height: 550rpx;
                margin-left: 10rpx;
                .statu {
                    width: 150rpx;
                    .text {
                        font-size: 24rpx;
                        color: #666;
                    }
                    .text1 {
                        font-size: 24rpx;
                        color: #333;
                        font-weight: 600;
                        margin-top: 2rpx;
                    }
                    .slide_s {
                        width: 100rpx;
                        height: 10rpx;
                        border-radius: 5rpx;
                        background: #f1f1f1;
                        margin-top: 10rpx;
                        .s1 {
                            height: 10rpx;
                            border-radius: 5rpx;
                            background: linear-gradient(
                                to right,
                                #ffd18d,
                                #ffa455
                            );
                        }
                        .s2 {
                            height: 10rpx;
                            border-radius: 5rpx;
                            background: linear-gradient(
                                to right,
                                #8cf2d6,
                                #25e2a6
                            );
                        }
                        .s3 {
                            height: 10rpx;
                            border-radius: 5rpx;
                            background: linear-gradient(
                                to right,
                                #eed8ff,
                                #c18cff
                            );
                        }
                    }
                }

                .cards {
                    .card {
                        position: relative;
                        width: 240rpx;
                        height: 218rpx;
                        padding: 10rpx;
                        background: #e9fcf6;
                        border-radius: 8rpx;
                        .title1 {
                            height: 40rpx;
                            .icon {
                                width: 40rpx;
                                height: 40rpx;
                            }
                            .text {
                                font-size: 24rpx;
                                color: #333;
                                font-weight: 600;
                                margin-left: 5rpx;
                            }
                        }
                        .food {
                            font-size: 22rpx;
                            color: #666;
                        }

                        .no {
                            font-size: 24rpx;
                            color: #999;
                            position: absolute;
                            top: 90rpx;
                            left: 80rpx;
                        }

                        .total {
                            position: absolute;
                            width: 240rpx;
                            height: 50rpx;
                            left: 0;
                            bottom: 10rpx;
                            padding: 0 10rpx;
                            align-items: flex-end;
                            .icon {
                                width: 50rpx;
                                height: 50rpx;
                            }
                            .text {
								margin-left: -10rpx;
                                font-size: 28rpx;
                                color: #1dc691;
                            }
                        }
                    }
                }
            }
        }
    }
}